<template>
    <div>
        <div style="margin-bottom: 15px;">
            <el-input v-model="params.dno" style="width: 200px;" placeholder="请输入宿舍号"></el-input>
            <el-button type="warning" style="margin-left: 10px;" @click="findBySearch()">查询</el-button>
            <el-button type="warning" style="margin-left: 10px;" @click="reset()">清空</el-button>

            <el-button type="primary" style="margin-left: 10px;" @click="add()">新增</el-button>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">

                <el-table-column prop="dno" label="宿舍号"></el-table-column>
                <el-table-column prop="cost" label="已用费用"></el-table-column>
                <el-table-column prop="leftFee" label="剩余费用"></el-table-column>
                <el-table-column prop="ctFee" label="续交费用"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定删除该信息吗？" @confirm="del(scope.row)">
                            <el-button slot="reference" type="danger" style="margin-left: 5px;">删除</el-button>
                        </el-popconfirm>
                        <!-- <el-button >删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="params.pageNum" :page-sizes="[5, 15, 20]" :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <div>
            <el-dialog title="新增水电信息" :visible.sync="dialogFormVisible" width="35">
                <el-form :model="form">
                    <!-- <el-form-item label="学号" label-width="15%">
              <el-input v-model="form.sno" autocomplete="off" style="width: 90%;"></el-input>
            </el-form-item> -->
                    <el-form-item label="宿舍号" label-width="15%">
                        <el-input v-model="form.dno" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item>
                    <el-form-item label="已用费用" label-width="15%">
                        <el-input v-model="form.cost" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item>
                    <el-form-item label="剩余费用" label-width="15%">
                        <el-input v-model="form.leftFee" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item>
                    <el-form-item label="续交费用" label-width="15%">
                        <el-input v-model="form.ctFee" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 编辑页面 -->
        <div>
            <el-dialog title="编辑水电信息" :visible.sync="dialogFormVisible2" width="35">
                <el-form :model="form2">
                    <!-- <el-form-item label="学号" label-width="15%">
              <el-input v-model="form.sno" autocomplete="off" style="width: 90%;"></el-input>
            </el-form-item> -->
                    <!-- <el-form-item label="宿舍号" label-width="15%">
                        <el-input v-model="form2.dno" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item> -->
                    <el-form-item label="已用费用" label-width="15%">
                        <el-input v-model="form2.cost" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item>
                    <el-form-item label="剩余费用" label-width="15%">
                        <el-input v-model="form2.leftFee" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item>
                    <el-form-item label="续交费用" label-width="15%">
                        <el-input v-model="form2.ctFee" autocomplete="off" style="width: 90%;"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="submit2()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request';

export default {
    name: 'WaterDian',
    data() {
        return {
            params: {
                dno: '',
                pageNum: 1,
                pageSize: 5
            },
            tableData: [],
            total: 0,
            dialogFormVisible: false,
            dialogFormVisible2: false,
            form: {},
            form2: {}
        }
    },
    //页面加载时候做的事情
    created() {
        this.findBySearch();
    },
    //定义一些一面控件发出的事件调用的方法
    methods: {
        findBySearch() {
            //  alert("查询测试"+this.params.name)
            request.get("/admin/waterdian/page", {
                params: this.params
            }).then(res => {
                if (res.code === 1) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                }
            })
        },
        add() {
            this.form = {};
            this.dialogFormVisible = true;//是否展示新增页面，true显示
        },
        edit(obj) {
                this.form2 = obj;
            this.dialogFormVisible2 = true;
        },
        reset() {
            this.params = {
                dno: '',
                pageNum: 1,//第几页
                pageSize: 5,//每页查询个数
            }
            this.findBySearch();
        },
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            this.findBySearch();
        },
        handleCurrentChange(pageNum) {
            this.params.pageNum = pageNum;
            this.findBySearch();
        },
        submit() {
            request.post("/admin/waterdian/add", this.form).then(res => {
                //json格式发送到后端
                if (res.code === 1) {
                    this.$message({
                        message: '新增成功',
                        type: 'success',
                    });
                    this.dialogFormVisible = false;
                    this.findBySearch();
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        submit2() {
            request.put("/admin/waterdian", this.form2).then(res => {
                if (res.code === 1) {
                    this.$message({
                        message: '信息修改成功',
                        type: 'success',
                    });
                    this.dialogFormVisible2 = false;
                    this.findBySearch();
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        del(obj) {
            request.delete("/admin/waterdian/" + obj.dno).then(res => {
                if (res.code === 1) {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                    });
                    this.findBySearch();
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error',
                    });
                }
            })
        }
    }

}
</script>